<template>
   <div style="padding-bottom:10px" :id="id" :class="className" :style="{height:height,width:width}">
   </div>       
</template>
<script>
    // 引入 ECharts 主模块
    const echarts = require('echarts/lib/echarts');

    require('echarts/lib/chart/line');
    require('echarts/lib/chart/bar');
    require('echarts/lib/chart/pie');
    require('echarts/lib/chart/scatter');
    require('echarts/lib/chart/radar');
    // 引入提示框和标题组件
    require('echarts/lib/component/tooltip');
    require('echarts/lib/component/title');
    require('echarts/lib/component/legend');
    require('echarts/lib/component/markPoint');
    require('echarts/lib/component/markLine');

require('zrender/lib/vml/vml');
    export default {
        name: 'barPercent',
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            id: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '200px'
            },
            height: {
                type: String,
                default: '200px'
            },
            option: {
                type: Object,
                default: ''
            }
        },
        data() {
            return {
                chart:null,
            };
        },
        watch: {
            'option':function(val){
                console.log("开始绘制")
                // if(val.series.length){
                     this.initChart();
                // }
                
            }
        },
        methods: {
            initChart() {
                if(this.chart){
                    this.chart.dispose();
                }
                this.chart = echarts.init(document.getElementById(this.id));
                this.chart.setOption(this.option);   
            }
        }
    }
</script>
